<template>
	<view>
		<view class="header">
			<image src="https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/image/combg.jpg"
				style="width: 100%;height: 260rpx;" mode="aspectFill"></image>
		</view>
		<view class="table">
			<!-- <view class="table_name">
				<view class="date">日期</view>
				<view class="name">比赛名称</view>
				<view class="address">地点</view>
			</view>
			<view class="table_item" v-for="item in List" @click="toDetail(item)">
				<view class="date">{{item.date}}</view>
				<view class="name">{{item.name}}</view>
				<view class="address">{{item.address}}</view>
			</view> -->
			<view style="font-size: 16px;color: #dd6161;font-weight: 600;padding: 6rpx 0;">精彩赛事</view>
			<view class="tableing">
				<view v-if="datalist.length > 0" class="tableing_item" v-for="item in datalist" @click="toDetail(item)">
					<view class="item_right">
						<image :src="item.photo_url" mode="aspectFill"
							style="width: 100%;height: 260rpx;border-radius: 10rpx;"></image>
					</view>
					<view class="item_left">
						<view style="font-size: 32rpx;font-weight: bold;margin: 10rpx 0;">{{item.title}}</view>
						<view style="font-size: 26rpx;padding: 10rpx 0;color: #82848a;">{{item.create_time}}</view>
						<view style="font-size: 24rpx;display: flex;align-items: center;color: #82848a;">
							<uv-icon name="empty-address" color="#2979ff" size="16"></uv-icon>
							{{item.address}}
						</view>
					</view>

				</view>
				<view v-if="datalist.length == 0" style="text-align: center;">
					<uv-empty mode="data" text="暂无赛事" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
				</view>
			</view>
		</view>
		<view style="height: 6rpx;width: 100%;background-color: #f3f4f6;margin: 30rpx 0;"></view>
		<view class="table">
			<!-- <view class="table_name">
				<view class="date">日期</view>
				<view class="name">比赛名称</view>
				<view class="address">地点</view>
			</view>
			<view class="table_item" v-for="item in List" @click="toDetail(item)">
				<view class="date">{{item.date}}</view>
				<view class="name">{{item.name}}</view>
				<view class="address">{{item.address}}</view>
			</view> -->
			<!-- <view style="font-size: 16px;font-weight: 600;padding: 6rpx 0;">历史赛事</view>
			<view class="tableing">
				<view v-if="List.length > 0" class="tableing_item" v-for="item in List" @click="toDetail(item)">
					<view class="item_left">
						<view style="font-size: 28rpx;">{{item.date}}</view>
						<view style="font-size: 26rpx;padding: 10rpx 0;">{{item.name}}</view>
						<view style="font-size: 24rpx;display: flex;align-items: center;">
							<uv-icon name="empty-address" size="16"></uv-icon>
							{{item.address}}
						</view>
					</view>
					<view class="item_right">
						<image src="https://cdn.uviewui.com/uview/album/1.jpg"
							style="width: 120rpx;height: 120rpx;border-radius: 10rpx;"></image>
					</view>
				</view>
			</view> -->
		</view>
		<view style="height: 60rpx;width: 100%;background-color: #f3f4f6;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist: [],
				List: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 获取比赛列表
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				uniCloud.callFunction({
					name: 'pagefunction',
					data: {
						dbName: 'competition', //要查询的表名
						filter: {}, //筛选条件，格式{sex:'女'}
						pageIndex: this.pageIndex, //第几页
						pageSize: 30 //每页的记录条数

					},
					success: res => {
						this.datalist = this.datalist.concat(res.result.data) //云端返回的查询数据,追加到数组datalist
						this.hasMore = res.result.hasMore //云端返回的是否有更多数据
						if (this.hasMore) {
							this.status = 'more'
							this.pageIndex = this.pageIndex + 1
						} else {
							this.status = 'nomore'
						}
						uni.hideLoading()
					}
				})
			},
			// 跳转详情
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/competition/detail?id=' + item._id
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f3f4f6;
	}
</style>
<style lang="scss" scoped>
	.table {
		width: 95%;
		margin: 0 auto;

		.tableing {
			.tableing_item {

				border: 1px solid #f3f4f6;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				margin: 30rpx 0;
				background-color: #ffffff;

				.item_left {
					flex: 3;
				}

				.item_right {
					flex: 1;
					text-align: right;
				}
			}
		}

		.table_name {
			display: flex;
			align-items: center;
			background-color: #fd8b53;
			border: 1px solid #fff;
			padding: 10rpx 0;
			color: #fff;
			font-size: 14px;
			border-radius: 6rpx;

			.date {
				flex: 1;
				text-align: center;
			}

			.name {
				flex: 2;
				text-align: center;
			}

			.address {
				flex: 1;
				text-align: center;
			}
		}

		.table_item {
			display: flex;
			align-items: center;
			font-size: 12px;
			padding: 12rpx 0;
			border-bottom: 1px solid #fd8b53;

			.date {
				flex: 1;
				text-align: center;
			}

			.name {
				flex: 2;
				text-align: center;
			}

			.address {
				flex: 1;
				text-align: center;
			}
		}
	}
</style>